import React from 'react';
import './PlaybackControls.css';

const PlaybackControls = ({ 
  playbackRate, 
  onPlaybackRateChange, 
  isRepeating, 
  onRepeatToggle,
  hasAudio 
}) => {
  const playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2];

  const handleRateChange = (rate) => {
    if (onPlaybackRateChange) {
      onPlaybackRateChange(rate);
    }
  };

  return (
    <div className="playback-controls">
      <div className="control-section">
        <h4>播放速度</h4>
        <div className="speed-buttons">
          {playbackRates.map(rate => (
            <button
              key={rate}
              className={`speed-btn ${playbackRate === rate ? 'active' : ''}`}
              onClick={() => handleRateChange(rate)}
              disabled={!hasAudio}
            >
              {rate === 1 ? '正常' : `${rate}×`}
            </button>
          ))}
        </div>
      </div>

      <div className="control-section">
        <h4>播放选项</h4>
        <div className="options">
          <button
            className={`option-btn ${isRepeating ? 'active' : ''}`}
            onClick={onRepeatToggle}
            disabled={!hasAudio}
            title="重复播放选中的字幕段落"
          >
            🔁 重复播放
            {isRepeating && <span className="status">ON</span>}
          </button>
        </div>
      </div>

      <div className="control-tips">
        <p>💡 双击字幕行可设置重复播放范围</p>
      </div>
    </div>
  );
};

export default PlaybackControls;